import React, { useEffect } from 'react';
import * as echarts from 'echarts';
import request from 'umi-request';

import option from './chartOption';
import './index.less';

export const BrokenLine: React.FC = () => {
  const refreshList = () => {
    const chartDom = document.getElementById('broken_line')!;
    const myChart = echarts.init(chartDom);
    option && myChart.setOption(option);
  };
  useEffect(() => {
    const chartDom = document.getElementById('broken_line')!;
    const myChart = echarts.init(chartDom);

    option && myChart.setOption(option);

    request.get('/mock/chartsBrokenLine').then((res) => {
      option.series && (option.series[0].data = res.data.yData);
      if (myChart) {
        myChart.clear();
        myChart.dispose();
        refreshList();
      }
    });
  }, []);

  return <div id="broken_line"></div>;
};
